<template>
  <el-container>
    <el-header>
      <!--头部-->
      <Header></Header>
    </el-header>
    <br>
    <el-main>
      <!--搜索-->
      <Search></Search>
      <el-steps :active="2" finish-status="success" simple style="margin-top: 20px">
        <el-step title="查看购物车" ></el-step>
        <el-step title="确认订单信息" ></el-step>
        <el-step title="成功提交订单" ></el-step>
      </el-steps>
      <br>

      <h1>收货人信息</h1>

      <el-form ref="form" :inline="true" :model="dataForm" label-width="80px" >

        <el-form-item label="收货人">
          <el-select v-model="dataForm.name" placeholder="请选择收货人" @change="changeInfo">
            <template v-for="x in nameList">
              <el-option :label="x.name" :value="x.name"></el-option>
            </template>
          </el-select>
        </el-form-item>

        <el-form-item label="邮政编码">
          <el-input v-model="dataForm.postCode" ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="dataForm.phone" ></el-input>
        </el-form-item>
        <el-form-item label="电子邮件">
          <el-input v-model="dataForm.email"></el-input>
        </el-form-item>

        <el-form-item label="收货地址">
          <el-input v-model="dataForm.address" style="width: 700px"></el-input>
        </el-form-item>
      </el-form>
      <h1>配送方式</h1>
        <el-radio-group v-model="postType" size="medium" @change="changePostPrice">
          <el-radio border label="申通"></el-radio>
          <el-radio border label="邮局平邮"></el-radio>
        </el-radio-group>
        <span v-show="stShow">申通配送费用：{{postPrice}}元</span>
       <span v-show="yjShow">邮局平邮配送费用：{{postPrice}}元</span>
      <h1>支付方式</h1>
      <el-radio-group v-model="payType" size="medium">
        <el-radio border :label="1" >微信</el-radio>
        <el-radio border :label="0">支付宝</el-radio>
      </el-radio-group>
      <h1>订单附言</h1>
      <el-input type="textarea" placeholder="请输入订单附言" v-model="orderRemark"></el-input>

       <div align="right">
         <br>
         <el-tag  type="primary">应付金额:{{payPrice}}元</el-tag>
         <el-button type="primary" @click="sureOrder">扫描支付</el-button>
       </div>

      <el-dialog  :visible.sync="dialogVisible" title="支付宝支付" width="30%">
        <div v-if="qrImageUrl">
          <img :src="qrImageUrl" alt="二维码" width="300px" height="300px">
        </div>
        <div align="right">
          <el-button type="success" size="mini" @click="surePay">我已支付</el-button>
        </div>

      </el-dialog>
    </el-main>
    <Footer></Footer>
  </el-container>
</template>

<script>
  import Header from "./myComponents/Header";
  import Search from "./myComponents/Search";
  import Footer from "./myComponents/Footer";
  import QRCode from 'qrcode';
  export default {
    name: "buyCarTwo",
    components:{
      Header,
      Search,
      Footer
    },
    data(){
      return{
        dialogVisible:false,
        qrImageUrl: "",
        qrText:"www",
        totalPrice:0,
        userId:"",
        nameList:[],//收货人列表
        dataForm: {
          orderId:"",
          name: '',//收货人
          postCode: '',//邮政编码
          phone: '',//电话
          email: '',//电子邮件
          address: ''//收货人地址
        },
        postType: "申通",//配送方式
        payType:0,//支付方式
        postPrice:15,//配送费用
        stShow:true,//默认显示申通费用信心
        yjShow:false,//默认不显示邮局费用信心
        orderRemark:"",//订单附言
        payPrice:0//应付金额
      }
    },
    methods:{
      changeInfo(){//收货人信息改变
        for(var i=0;i< this.nameList.length;i++){
           if(this.dataForm.name==this.nameList[i].name){
              this.dataForm.postCode = this.nameList[i].postCode;
              this.dataForm.phone = this.nameList[i].phone;
              this.dataForm.address = this.nameList[i].address;
              this.dataForm.email = this.nameList[i].email;

           }
        }


      },
      changePostPrice(){//配送方式信息改变
            if(this.postType=="申通"){
                this.stShow = true;
                this.yjShow = false;
                this.postPrice = 15
            }else{
              this.stShow = false;
              this.yjShow = true;
              this.postPrice = 5
            }
            //计算应付金额
            this.payPrice = Number(this.totalPrice)+this.postPrice;
      },
       sureOrder(){//确认订单

         const self = this;
         //创建生成二维码的参数对象
         const p ={
           "num":this.dataForm.orderId,
           "name":this.dataForm.name,
           "money":this.payPrice,
           "body":"商品"
         }
         //发送ajax请求
         const http = self.$http.get("/order-info/createCode",{params:p});
         //成功回调
         http.then(function (rs) {
           console.log(rs.data)
           //生成二维码
           self.generateQRCode(rs.data);

         });

      },
      async generateQRCode(text) {// 生成支付二维码
        this.dialogVisible=true;
        try {
          const url = await QRCode.toDataURL(text);
          this.qrImageUrl = url;
        } catch (error) {
          console.error('生成二维码出错:', error);
        }
      },
      surePay(){//订单确认
        this.dialogVisible=false;

        this.dataForm.payType = this.payType;
        this.dataForm.orderRemark= this.orderRemark;
        this.dataForm.orderMoney = this.payPrice;
        if(this.dataForm.name==""){
          this.$message({message:"收货人不能为空",type:"success"});
          return;
        }
        const self = this;
        //发送ajax请求
        const http = self.$http.post("/order-info/updateOrder",self.dataForm);
        //成功回调
        http.then(function (rs) {

          if(rs.data.code==200){
            self.$message({message:"付款成功",type:"success"});
            self.$router.push({"name":"buyCarThree",query:{"orderId":self.dataForm.orderId,"payPrice":self.payPrice}});
          }else{
            self.$message(rs.data.msg);
          }
        });
        http.catch(function () {
          self.$message("服务器异常");
        })
      },
      queryData(){// 查询收货人

        const self = this;
        this.userId = 1;
        //发送ajax请求
        const http = this.$http.get("/recipient/queryData",{params:{"userId":this.userId}});
        //成功回调
        http.then(function (rs) {
          console.log(rs.data);
          if(rs.data.code==200){
           self.nameList = rs.data.data;

          }else{
            self.$message(rs.data.msg);
          }
        });
        http.catch(function () {
          self.$alert("服务器异常，请检查地址或者服务器是否启动");
        })
      }

    },
    created() {
        this.queryData();
        //获取总价
        this.totalPrice = this.$route.query.totalPrice;
        //获取订单编号
        this.dataForm.orderId = this.$route.query.orderId;
        //计算付款价格
        this.payPrice = Number(this.totalPrice)+this.postPrice;

    }

  }
</script>

<style scoped>

</style>
